import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import * as actions from '../../actions';

class Link extends Component {
    render() {
        const {active, filter, children, dispatch} = this.props;
        if(active) {
            return (
                <b>
                    {children}
                </b>
            );
        }
        return (
            <a href="#" onClick={(e) => {
            	e.preventDefault();
            	dispatch(actions.setFilter(filter));
            }}>
                {children}
            </a>
        );
    }
}

Link.propTypes = {
    filter: PropTypes.string.isRequired
};

function mapStateToProps(state, ownProps) {
    return {
        active: state.filter === ownProps.filter
    };
}

export default connect(mapStateToProps)(Link);
